<template>
	<div class="payment_status">
		<div class="status_top">
			<van-icon :name="statusIcon" :class="statusClass" />
			<div>{{statusText}}</div>
		</div>
		
		<div class="status_text" v-if="isSuccess">
			<countdown :time="5000" @countdownend="countDownEnd">
				<template slot-scope="props">
					<span class="red">{{ props.seconds }}秒</span>
				</template>
			</countdown>
			后返首页继续购物, 您也可以查看订单详情
		</div>
		<div class="status_text" v-else>抱歉，支付遇到问题, 请您稍后再试!</div>
		<div class="status_goLink">
			<div class="red" @click="$router.go(-1)">查看订单详情<van-icon name="arrow" /></div>
		</div>
	</div>	
</template>

<script>
export default {
  name: "payment-status",

  props: {
    status: String
  },

  data() {
    return {
      isSuccess: true
    }
  },

  computed: {
    statusText() {
      return this.isSuccess ? '支付成功' : '支付失败'
    },
    statusIcon() {
      return this.isSuccess ? 'checked' : 'fail'
    },
    statusClass() {
      return this.isSuccess ? 'success_icon' : 'fail_icon'
    }
  },

  created() {
    this.isSuccess = (this.status === "success");
  },

  methods: {
		// 点击查看订单详情跳转到订单详情页面
		lookDetail(){
			// $router.go(-1)
				this.$router.push({name:"payment"})	
		},
	  countDownEnd() {
		  const order = this.$util.getSessionStorage('order');
			this.$router.replace({name: "home"});

		  // if (order && order.payback) {
			//   this.$router.replace(order.payback);
		  // } else {
		  // }
	  }
  }
}

</script>


<style lang="scss" scopd>
	.payment_status {
		padding-top: 30px;
		box-sizing: border-box;
		background-color: #fff;
		text-align: center;
	}
	
	.status_top{
		margin-bottom: 15px;
		i{
			margin-bottom: 5px;
		}
		>div{
			font-size: 18px;
		}
	}
	
	.status_text{
		color: $font-color-gray;
		margin-bottom: 50px;
	}

	.status_icon {
		font-size: 80px;
	}

	i.success_icon {
		@extend .status_icon;
		color: #06bf04
	}

	i.fail_icon {
		@extend .status_icon;
		color: #f44
	}

</style>
